<template>
  <div class="train">
    <div class="train_top">
      <div class="title"> {{ time }}各培训类型完成情况占比图</div>
      <pieChart id="entryRate" ref="entryRate" height="80%" width="30%"></pieChart>
      <pieChart id="preworkRate" ref="preworkRate" height="80%" width="30%"></pieChart>
      <pieChart id="specialProjectRate" ref="specialProjectRate" height="80%" width="30%"></pieChart>
    </div>
    <div class="train_bottom">
      <tableBox :data="tableData" :show-serial-number="false" @toIecturer="toIecturer">
      </tableBox>
    </div>
  </div>
</template>
<script>
import tableBox from "../components/tableBox.vue"
import pieChart from "../components/pieChart.vue"
import {
  getMonthTrainTypeRate,
  getMonthTrainPlanTable
} from "@/api/bi/HRAndContract";
export default {
  components: { tableBox, pieChart },
  data() {
    return {
      tableData: [],
      time: null,
      load: null
    }
  },
  mounted() {
    this.load = this.$loading({
      lock: true,
      text: '加载中...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    this.getChartData()
    this.getTableData()
    let date = new Date()
    this.time = date.getFullYear() + '年' + (date.getMonth() + 1) + '月'
  },
  methods: {
    async getChartData() {
      const { data: res } = await getMonthTrainTypeRate();
      let data1 = [{ value: res.rzSuccessNumber, name: '完成人数' },
      { value: res.rzUnSuccessNumber, name: '未完成人数' }]
      let data2 = [{ value: res.gqSuccessNumber, name: '完成人数' },
      { value: res.gqUnSuccessNumber, name: '未完成人数' }]
      let data3 = [{ value: res.zxSuccessNumber, name: '完成人数' },
      { value: res.zxUnSuccessNumber, name: '未完成人数' }]

      let tem = {
        text: "在保情况占比图", // 主标题
        textStyle: {
          color: "#000",
          fontSize: 18,
        },
        left: "49.5%", // 定位到适合的位置
        top: "45%", // 定位到适合的位置
        textAlign: "center", // 主、副标题水平居中显示
      }

      let title1 = [{ ...tem, text: '入职培训' }]
      let title2 = [{ ...tem, text: '岗前培训' }]
      let title3 = [{ ...tem, text: '专项培训' }]
      let legend = { bottom: 5 }
      this.$refs.entryRate.initChart(data1, legend, title1)
      this.$refs.preworkRate.initChart(data2, legend, title2)
      this.$refs.specialProjectRate.initChart(data3, legend, title3)

    },
    async getTableData() {
      const { data: res } = await getMonthTrainPlanTable();

      let style = "background: #EEEFF3;border-right:1px solid #fff"
      let tableThead = [
        [{ val: '项目区域', rowspan: 2, style }, { val: '项目名称', rowspan: 2, style }, { val: '入职培训', colspan: 3, style }, { val: '岗前培训', colspan: 3, style }, { val: '专项培训', colspan: 3, style }],
        [{ val: '培训人数' }, { val: '完成人数' }, { val: '项目培训完成率' }, { val: '培训人数' }, { val: '完成人数' }, { val: '项目培训完成率' }, { val: '培训人数' }, { val: '完成人数' }, { val: '项目培训完成率' }]
      ]
      let data = []
      res.forEach(item => {
        data.push([
          { val: item.projectRegion },
          { val: item.projectName, click: 'toIecturer', key: item.projectId, style: "cursor: pointer;color:#409EFF" },
          { val: item.rzNumber },
          { val: item.rzSuccessNumber },
          { val: item.rzRate ? item.rzRate.toFixed(2) + '%' : '0.00%' },
          { val: item.gqNumber },
          { val: item.gqSuccessNumber },
          { val: item.gqRate ? item.gqRate.toFixed(2) + '%' : '0.00%' },
          { val: item.zxNumber },
          { val: item.zxSuccessNumber },
          { val: item.zxRate ? item.zxRate.toFixed(2) + '%' : '0.00%' }
        ])
      });

      this.tableData = [...tableThead, ...data]
      this.load.close();
    },
    toIecturer(key) {
      this.$router.push("/cloudManage/personnel/iecturer")
    }

  }
}
</script>
<style lang="scss" scoped>
.train {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;


  .title {
    line-height: 39px;
    color: rgba(0, 0, 0, 1);
    font-size: 28px;
    text-align: center;
  }

  .train_top {
    width: 100%;
    height: 35vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .title {
      width: 100%;
    }

    // #entryRate,
    // #preworkRate,
    // #specialProjectRate {
    //   height: 30vh;
    // }
  }

  .train_bottom {
    height: 50vh;
    display: flex;
    flex-direction: column;

    >div:nth-child(2) {
      flex-grow: 1;
    }
  }
}
</style>